<template>
  <el-timeline>
    <el-timeline-item
      v-for="it in itemList"
      :key="it.title"
      :icon="it.icon"
      size="large"
      color="#0bbd87"
    >
      <el-card>
        <h4>{{ it.title }}</h4>
        <p>
          <span v-for="obj in it.content" :key="obj.text">
            <span v-if="obj.type === 'span'">{{ obj.text }}</span>
            <el-link
              v-if="obj.type === 'link'"
              class="link"
              :href="obj.href"
            >{{ obj.text }}</el-link>
          </span>
        </p>
      </el-card>
    </el-timeline-item>
  </el-timeline>
</template>

<script>
export default {
  name: 'RuleTimeline',
  props: {
    itemList: {
      type: Array,
      default: () => []
    }
  }
};
</script>

<style scoped>
.link {
  padding: 0px 3px 3px 3px;
  color: darkgray;
}
</style>
